<?php
/**
 * Yii view widgets
 *
 * @author nguyenmanhluu
 * @since Aug 19, 2013 - 7:49:15 AM
 */
?>
<style>
    .widget-list, .widget-columns { 
        list-style-type: none;
        min-height: 30px;
    }
    .widget-list li {         
    }
    .widget-list li .box .box-header{
        background: #999;
    }
    .widget-list li .box .box-header .box-icon{
        background: #666;
    }
    .widget-list li .box .box-header .box-icon i{
        border-left: 1px solid #ccc;
    }
</style>
<script>
    $(function() {
        $(".widget-list").sortable({
            connectWith: ".widgets-connect",
            helper: "clone",
            start: function(e, ui) {
                ui.placeholder.height(ui.item.height());
                $(".widget-list").find('.portlet:hidden').show()
                console.log('started')
            },
            stop: function(event, ui) {
                var idx = $('.widget-columns').children().index($(ui.item[0])) - 1,
                        elm = $(ui.item[0]).clone(true).removeClass('box ui-draggable ui-draggable-dragging').addClass('box-clone');
                $('.widget-columns').children(':eq(' + idx + ')').after(elm);
                $(this).sortable('cancel');
            }
        });
        $('.widget-columns').sortable();

    });
</script>

<div class="row-fluid">
    <div class="span8">
        <?php
        $this->renderPartial('_available', array(
            'widget_template' => $widget_template,
        ));
        ?>
    </div>
    <div class="span4">
        <?php
        $this->renderPartial('_columns', array(
            'columns' => $columns
        ))
        ?>
    </div>
</div>